<template>
    <div class="chat-container">
        <!-- 左侧联系人面板 -->
        <div class="contacts-panel">
            <!-- 头部 -->
            <div class="contacts-header">
                <h2 class="contacts-title">联系人</h2>
                <div class="header-actions">
                    <el-icon class="search-icon" @click="showSearchDialog = true">
                        <Search />
                    </el-icon>
                    <el-icon class="add-icon" @click="showAddFriendDialog = true">
                        <Plus />
                    </el-icon>
                </div>
            </div>

            <!-- 导航标签 -->
            <div class="nav-tabs">
                <div v-for="tab in tabs" :key="tab.key" class="nav-tab" :class="{ active: activeTab === tab.key }"
                    @click="switchTab(tab.key)">
                    {{ tab.label }}
                </div>
            </div>

            <!-- 联系人列表 -->
            <div class="contacts-list">
                <div v-for="contact in filteredContacts" :key="contact.id" class="contact-item"
                    :class="{ active: selectedContact?.id === contact.id, pinned: contact.pinned }"
                    @click="selectContact(contact)">
                    <div class="contact-avatar" :class="{ active: selectedContact?.id === contact.id }">
                        <img v-if="contact.avatar" :src="contact.avatar" :alt="contact.name" />
                        <div v-else class="avatar-placeholder"></div>
                    </div>
                    <div class="contact-info">
                        <div class="contact-name" :class="{ active: selectedContact?.id === contact.id }">
                            {{ contact.name }}
                            <el-icon v-if="contact.pinned" class="pin-icon">
                                <Star />
                            </el-icon>
                        </div>
                        <div v-if="activeTab !== 'friends'" class="contact-last-message">{{ contact.lastMessage }}</div>
                        <div v-else class="contact-status">
                            <span v-if="contact.online" class="online-status">在线</span>
                            <span v-else class="offline-status">离线</span>
                        </div>
                    </div>
                    <div v-if="activeTab !== 'friends'" class="contact-time">{{ contact.time }}</div>
                    <div v-else class="contact-time">
                        <span v-if="contact.online" class="online-dot"></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧聊天窗口 -->
        <div class="chat-panel">
            <!-- 聊天头部 -->
            <div class="chat-header">
                <div class="chat-user-info">
                    <div class="user-name">{{ selectedContact?.name || '选择联系人' }}</div>
                    <div v-if="selectedContact?.online" class="user-status">
                        <span class="status-dot"></span>
                        在线
                    </div>
                </div>
                <div class="chat-actions">
                    <el-dropdown @command="handleChatAction" trigger="click" v-if="selectedContact">
                        <el-icon class="action-icon">
                            <MoreFilled />
                        </el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="pin" :class="{ 'pinned': selectedContact?.pinned }">
                                    <el-icon>
                                        <Star />
                                    </el-icon>
                                    {{ selectedContact?.pinned ? '取消置顶' : '置顶聊天' }}
                                </el-dropdown-item>
                                <el-dropdown-item command="clearHistory">
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                    删除聊天记录
                                </el-dropdown-item>
                                <el-dropdown-item command="deleteFriend" divided>
                                    <el-icon>
                                        <UserDelete />
                                    </el-icon>
                                    删除好友
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>

            <!-- 消息区域 -->
            <div class="messages-area" ref="messagesArea">
                <div v-for="message in currentMessages" :key="message.id" class="message"
                    :class="{ 'message-sent': message.sent, 'message-received': !message.sent }">
                    <div class="message-bubble">
                        <!-- 文本消息 -->
                        <div v-if="message.type === 'text' || !message.type" class="message-text">
                            {{ message.text }}
                        </div>
                        <!-- 表情消息 -->
                        <div v-else-if="message.type === 'emoji'" class="message-emoji">
                            {{ message.text }}
                        </div>
                        <!-- 图片消息 -->
                        <div v-else-if="message.type === 'image'" class="message-image">
                            <img :src="message.imageUrl" :alt="message.text" @click="previewImage(message.imageUrl)" />
                        </div>
                        <div class="message-time">{{ message.time }}</div>
                    </div>
                </div>
            </div>

            <!-- 输入区域 -->
            <div class="input-area">
                <div class="input-actions">
                    <el-icon class="input-icon" @click="toggleEmojiPicker">
                        <svg t="1760842341283" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="1715" width="48" height="48">
                            <path
                                d="M512 986.88c-241.493333 0-438.186667-196.693333-438.186667-438.186667S270.506667 110.506667 512 110.506667 950.186667 307.2 950.186667 548.693333 753.493333 986.88 512 986.88z m0-791.04c-194.56 0-352.853333 158.293333-352.853333 352.853333s158.293333 352.853333 352.853333 352.853334 352.853333-158.293333 352.853333-352.853334S706.56 195.84 512 195.84z"
                                fill="#8a8a8a" p-id="1716"></path>
                            <path
                                d="M512 769.706667a221.866667 221.866667 0 0 1-177.493333-89.173334 42.496 42.496 0 0 1 8.96-59.733333 42.496 42.496 0 0 1 59.733333 8.96 134.826667 134.826667 0 0 0 109.226667 55.04c43.093333 0 82.773333-20.053333 108.8-54.613333 14.08-18.773333 40.96-22.613333 59.733333-8.533334 18.773333 14.08 22.613333 40.96 8.533333 59.733334A224.128 224.128 0 0 1 512 769.706667zM376.32 556.8c-23.466667 0-42.666667-19.2-42.666667-42.666667v-56.746666c0-23.466667 19.2-42.666667 42.666667-42.666667s42.666667 19.2 42.666667 42.666667v56.746666c0 23.466667-18.773333 42.666667-42.666667 42.666667zM622.08 556.8c-23.466667 0-42.666667-19.2-42.666667-42.666667v-56.746666c0-23.466667 19.2-42.666667 42.666667-42.666667s42.666667 19.2 42.666667 42.666667v56.746666c0 23.466667-19.2 42.666667-42.666667 42.666667z"
                                fill="#8a8a8a" p-id="1717"></path>
                        </svg>
                    </el-icon>
                    <el-icon class="input-icon" @click="triggerImageUpload">
                        <Picture />
                    </el-icon>
                    <input ref="imageInput" type="file" accept="image/*" style="display: none"
                        @change="handleImageUpload" />
                </div>
                <input v-model="newMessage" type="text" placeholder="输入消息..." class="message-input"
                    @keyup.enter="sendMessage" />
                <el-icon class="send-icon" @click="sendMessage">
                    <Position />
                </el-icon>

                <!-- 表情包选择器 -->
                <div v-if="showEmojiPicker" class="emoji-picker" @click.stop>
                    <div class="emoji-picker-header">
                        <span class="emoji-title">选择表情</span>
                        <el-icon class="close-emoji" @click="showEmojiPicker = false">
                            <Close />
                        </el-icon>
                    </div>
                    <div class="emoji-grid">
                        <div v-for="emoji in emojiList" :key="emoji" class="emoji-item" @click="selectEmoji(emoji)">
                            {{ emoji }}
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

    <!-- 添加好友弹窗 -->
    <el-dialog v-model="showAddFriendDialog" title="添加好友" width="400px" :before-close="handleCloseAddFriend">
        <div class="add-friend-content">
            <div class="search-section">
                <el-input v-model="searchKeyword" placeholder="搜索用户ID或昵称" class="search-input" @input="searchUsers">
                    <template #prefix>
                        <el-icon>
                            <Search />
                        </el-icon>
                    </template>
                </el-input>
            </div>

            <div class="search-results" v-if="searchResults.length > 0">
                <div class="result-title">搜索结果</div>
                <div v-for="user in searchResults" :key="user.id" class="user-item">
                    <div class="user-avatar">
                        <img v-if="user.avatar" :src="user.avatar" :alt="user.name" />
                        <div v-else class="avatar-placeholder"></div>
                    </div>
                    <div class="user-info">
                        <div class="user-name">{{ user.name }}</div>
                        <div class="user-id">ID: {{ user.id }}</div>
                    </div>
                    <el-button type="primary" size="small" :disabled="isAlreadyFriend(user.id)"
                        @click="addFriend(user)">
                        {{ isAlreadyFriend(user.id) ? '已添加' : '添加' }}
                    </el-button>
                </div>
            </div>

            <div class="no-results" v-else-if="searchKeyword && !isSearching">
                未找到相关用户
            </div>
        </div>
    </el-dialog>

    <!-- 搜索弹窗 -->
    <el-dialog v-model="showSearchDialog" title="搜索联系人" width="400px">
        <div class="search-contacts-content">
            <el-input v-model="contactSearchKeyword" placeholder="搜索联系人" class="search-input" @input="searchContacts">
                <template #prefix>
                    <el-icon>
                        <Search />
                    </el-icon>
                </template>
            </el-input>

            <div class="search-contacts-results" v-if="filteredContactsBySearch.length > 0">
                <div v-for="contact in filteredContactsBySearch" :key="contact.id" class="contact-search-item"
                    @click="selectContact(contact); showSearchDialog = false">
                    <div class="contact-avatar">
                        <img v-if="contact.avatar" :src="contact.avatar" :alt="contact.name" />
                        <div v-else class="avatar-placeholder"></div>
                    </div>
                    <div class="contact-info">
                        <div class="contact-name">{{ contact.name }}</div>
                        <div class="contact-last-message">{{ contact.lastMessage }}</div>
                    </div>
                </div>
            </div>

            <div class="no-results" v-else-if="contactSearchKeyword && filteredContactsBySearch.length === 0">
                未找到相关联系人
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'

// 响应式数据
const activeTab = ref('recent')
const selectedContact = ref(null)
const newMessage = ref('')
const messagesArea = ref(null)

// 添加好友相关数据
const showAddFriendDialog = ref(false)
const showSearchDialog = ref(false)
const searchKeyword = ref('')
const contactSearchKeyword = ref('')
const searchResults = ref([])
const isSearching = ref(false)

// 表情包和图片相关数据
const showEmojiPicker = ref(false)
const imageInput = ref(null)
const emojiList = ref([
    '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
    '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
    '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
    '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
    '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬',
    '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗',
    '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😬', '🙄', '😯',
    '😦', '😧', '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐',
    '🥴', '🤢', '🤮', '🤧', '😷', '🤒', '🤕', '🤑', '🤠', '😈',
    '👿', '👹', '👺', '🤡', '💩', '👻', '💀', '☠️', '👽', '👾'
])

// 标签页数据
const tabs = [
    { key: 'recent', label: '最近聊天' },
    { key: 'friends', label: '好友列表' },
    { key: 'groups', label: '群组' }
]

// 联系人数据
const contacts = ref([
    {
        id: 1,
        name: '张教练',
        lastMessage: '今天下午三点的瑜伽课还在吗?',
        time: '10:23',
        online: true,
        avatar: null,
        pinned: false,
        messages: [
            {
                id: 1,
                text: '你好!今天下午三点的瑜伽课依然按时进行,请准时到达瑜伽室。',
                time: '10:23',
                sent: false
            },
            {
                id: 2,
                text: '好的,我会准时到达。请问今天的课程主题是什么?',
                time: '10:25',
                sent: true
            }
        ]
    },
    {
        id: 2,
        name: '健身小组',
        lastMessage: '周末一起去爬山吧!',
        time: '昨天',
        online: false,
        avatar: null,
        pinned: true,
        messages: [
            {
                id: 1,
                text: '大家好！这个周末天气不错，一起去爬山怎么样？',
                time: '昨天 15:30',
                sent: false
            }
        ]
    },
    {
        id: 3,
        name: '营养师 李医生',
        lastMessage: '您的饮食计划已经更新',
        time: '周一',
        online: false,
        avatar: null,
        pinned: false,
        messages: [
            {
                id: 1,
                text: '您好，根据您最近的体检报告，我已经为您更新了饮食计划。',
                time: '周一 09:15',
                sent: false
            }
        ]
    }
])

// 模拟用户数据库（用于搜索添加好友）
const allUsers = ref([
    { id: 'user001', name: '王小明', avatar: null },
    { id: 'user002', name: '李小红', avatar: null },
    { id: 'user003', name: '张小强', avatar: null },
    { id: 'user004', name: '陈小美', avatar: null },
    { id: 'user005', name: '刘小华', avatar: null },
    { id: 'user006', name: '赵小军', avatar: null },
    { id: 'user007', name: '孙小丽', avatar: null },
    { id: 'user008', name: '周小刚', avatar: null },
    { id: 'user009', name: '吴小芳', avatar: null },
    { id: 'user010', name: '郑小伟', avatar: null }
])

// 计算属性
const filteredContacts = computed(() => {
    if (activeTab.value === 'recent') {
        // 最近聊天：显示有消息记录的联系人，置顶的排在前面，然后按最后消息时间排序
        return contacts.value
            .filter(contact => contact.messages && contact.messages.length > 0)
            .sort((a, b) => {
                // 置顶的排在前面
                if (a.pinned && !b.pinned) return -1
                if (!a.pinned && b.pinned) return 1

                // 简单的排序逻辑，可以根据实际需求调整
                const timeA = a.time === '刚刚' ? 0 : (a.time === '昨天' ? 1 : 2)
                const timeB = b.time === '刚刚' ? 0 : (b.time === '昨天' ? 1 : 2)
                return timeA - timeB
            })
    } else if (activeTab.value === 'friends') {
        // 好友列表：只显示个人好友，不显示群组，置顶的排在前面
        return contacts.value
            .filter(contact => contact.id !== 2)
            .sort((a, b) => {
                if (a.pinned && !b.pinned) return -1
                if (!a.pinned && b.pinned) return 1
                return 0
            })
    } else if (activeTab.value === 'groups') {
        // 群组：只显示群组，置顶的排在前面
        return contacts.value
            .filter(contact => contact.id === 2)
            .sort((a, b) => {
                if (a.pinned && !b.pinned) return -1
                if (!a.pinned && b.pinned) return 1
                return 0
            })
    }
    return contacts.value
})

const currentMessages = computed(() => {
    return selectedContact.value?.messages || []
})

const filteredContactsBySearch = computed(() => {
    if (!contactSearchKeyword.value) return []
    return contacts.value.filter(contact =>
        contact.name.toLowerCase().includes(contactSearchKeyword.value.toLowerCase())
    )
})

// 方法
const switchTab = (tabKey) => {
    activeTab.value = tabKey
}

const selectContact = (contact) => {
    selectedContact.value = contact
    // 滚动到底部
    nextTick(() => {
        scrollToBottom()
    })
}

const sendMessage = () => {
    if (!newMessage.value.trim() || !selectedContact.value) return

    // 判断是否为表情消息（只包含表情符号）
    const isEmojiMessage = /^[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\s]+$/u.test(newMessage.value.trim())

    const message = {
        id: Date.now(),
        text: newMessage.value,
        type: isEmojiMessage ? 'emoji' : 'text',
        time: new Date().toLocaleTimeString('zh-CN', {
            hour: '2-digit',
            minute: '2-digit'
        }),
        sent: true
    }

    selectedContact.value.messages.push(message)
    newMessage.value = ''

    // 更新最后一条消息
    selectedContact.value.lastMessage = isEmojiMessage ? '[表情]' : message.text
    selectedContact.value.time = message.time

    // 滚动到底部
    nextTick(() => {
        scrollToBottom()
    })
}

const scrollToBottom = () => {
    if (messagesArea.value) {
        messagesArea.value.scrollTop = messagesArea.value.scrollHeight
    }
}

// 搜索用户
const searchUsers = () => {
    if (!searchKeyword.value.trim()) {
        searchResults.value = []
        return
    }

    isSearching.value = true

    // 模拟搜索延迟
    setTimeout(() => {
        searchResults.value = allUsers.value.filter(user =>
            user.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
            user.id.toLowerCase().includes(searchKeyword.value.toLowerCase())
        )
        isSearching.value = false
    }, 300)
}

// 搜索联系人
const searchContacts = () => {
    // 这个计算属性会自动更新
}

// 检查是否已经是好友
const isAlreadyFriend = (userId) => {
    return contacts.value.some(contact => contact.id === userId)
}

// 添加好友
const addFriend = (user) => {
    if (isAlreadyFriend(user.id)) return

    const newContact = {
        id: user.id,
        name: user.name,
        lastMessage: '你们已经是好友了，开始聊天吧！',
        time: '刚刚',
        online: false,
        avatar: user.avatar,
        pinned: false,
        messages: [
            {
                id: 1,
                text: '你们已经是好友了，开始聊天吧！',
                time: '刚刚',
                sent: false
            }
        ]
    }

    contacts.value.unshift(newContact)

    // 关闭弹窗并清空搜索
    showAddFriendDialog.value = false
    searchKeyword.value = ''
    searchResults.value = []

    // 自动选择新添加的好友
    selectContact(newContact)
}

// 关闭添加好友弹窗
const handleCloseAddFriend = () => {
    showAddFriendDialog.value = false
    searchKeyword.value = ''
    searchResults.value = []
}

// 切换表情选择器
const toggleEmojiPicker = () => {
    console.log('切换表情选择器:', showEmojiPicker.value)
    showEmojiPicker.value = !showEmojiPicker.value
}

// 选择表情
const selectEmoji = (emoji) => {
    newMessage.value += emoji
    showEmojiPicker.value = false
}

// 触发图片上传
const triggerImageUpload = () => {
    imageInput.value.click()
}

// 处理图片上传
const handleImageUpload = (event) => {
    const file = event.target.files[0]
    if (!file) return

    // 检查文件类型
    if (!file.type.startsWith('image/')) {
        alert('请选择图片文件')
        return
    }

    // 检查文件大小 (限制为5MB)
    if (file.size > 5 * 1024 * 1024) {
        alert('图片大小不能超过5MB')
        return
    }

    // 创建FileReader读取图片
    const reader = new FileReader()
    reader.onload = (e) => {
        const imageUrl = e.target.result
        sendImageMessage(imageUrl, file.name)
    }
    reader.readAsDataURL(file)

    // 清空input，允许重复选择同一文件
    event.target.value = ''
}

// 发送图片消息
const sendImageMessage = (imageUrl, fileName) => {
    if (!selectedContact.value) return

    const message = {
        id: Date.now(),
        text: fileName,
        imageUrl: imageUrl,
        type: 'image',
        time: new Date().toLocaleTimeString('zh-CN', {
            hour: '2-digit',
            minute: '2-digit'
        }),
        sent: true
    }

    selectedContact.value.messages.push(message)

    // 更新最后一条消息
    selectedContact.value.lastMessage = '[图片]'
    selectedContact.value.time = message.time

    // 滚动到底部
    nextTick(() => {
        scrollToBottom()
    })
}

// 预览图片
const previewImage = (imageUrl) => {
    // 创建图片预览弹窗
    const previewDialog = document.createElement('div')
    previewDialog.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        cursor: pointer;
    `

    const img = document.createElement('img')
    img.src = imageUrl
    img.style.cssText = `
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
        border-radius: 8px;
    `

    previewDialog.appendChild(img)
    document.body.appendChild(previewDialog)

    // 点击关闭预览
    previewDialog.onclick = () => {
        document.body.removeChild(previewDialog)
    }
}

// 处理聊天操作下拉菜单
const handleChatAction = async (command) => {
    if (!selectedContact.value) return

    switch (command) {
        case 'pin':
            // 切换置顶状态
            const wasPinned = selectedContact.value.pinned
            selectedContact.value.pinned = !selectedContact.value.pinned

            // 显示提示
            ElMessage({
                message: selectedContact.value.pinned ? `已将 ${selectedContact.value.name} 置顶` : `已取消置顶 ${selectedContact.value.name}`,
                type: 'success',
                duration: 2000,
                showClose: true
            })
            break
        case 'clearHistory':
            // 删除聊天记录
            try {
                await ElMessageBox.confirm(
                    `确定要删除与 ${selectedContact.value.name} 的聊天记录吗？`,
                    '删除聊天记录',
                    {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning',
                        confirmButtonClass: 'el-button--primary',
                        customClass: 'custom-message-box'
                    }
                )
                selectedContact.value.messages = []
                selectedContact.value.lastMessage = ''
                selectedContact.value.time = ''

                // 显示成功提示
                ElMessage({
                    message: `已删除与 ${selectedContact.value.name} 的聊天记录`,
                    type: 'success',
                    duration: 3000,
                    showClose: true
                })
            } catch {
                // 用户取消操作
            }
            break
        case 'deleteFriend':
            // 删除好友
            try {
                await ElMessageBox.confirm(
                    `确定要删除好友 ${selectedContact.value.name} 吗？删除后将无法恢复。`,
                    '删除好友',
                    {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning',
                        confirmButtonClass: 'el-button--primary',
                        customClass: 'custom-message-box'
                    }
                )
                const contactName = selectedContact.value.name
                const index = contacts.value.findIndex(contact => contact.id === selectedContact.value.id)
                if (index > -1) {
                    contacts.value.splice(index, 1)
                    selectedContact.value = null

                    // 显示成功提示
                    ElMessage({
                        message: `已删除好友 ${contactName}`,
                        type: 'success',
                        duration: 3000,
                        showClose: true
                    })
                }
            } catch {
                // 用户取消操作
            }
            break
    }
}

// 点击外部关闭表情选择器
const handleClickOutside = (event) => {
    if (showEmojiPicker.value && !event.target.closest('.emoji-picker') && !event.target.closest('.input-icon')) {
        showEmojiPicker.value = false
    }
}

// 初始化
onMounted(() => {
    // 默认选择第一个联系人
    if (contacts.value.length > 0) {
        selectContact(contacts.value[0])
    }

    // 添加点击外部关闭表情选择器的事件监听
    document.addEventListener('click', handleClickOutside)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
    document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
/* 主容器 */
.chat-container {
    display: flex;
    height: 100vh;
    background-color: #f5f5f5;
    border: 3px solid var(--el-color-success);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    padding-bottom: 2px;
    box-sizing: border-box;
}

/* 左侧面板 */
.contacts-panel {
    width: 300px;
    background-color: white;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}

.contacts-header {
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contacts-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #2e7d32;
}

.header-actions {
    display: flex;
    gap: 12px;
}

.search-icon,
.add-icon {
    width: 20px;
    height: 20px;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.search-icon:hover,
.add-icon:hover {
    background-color: #f0f0f0;
}

.add-icon {
    background-color: #2e7d32;
    color: white;
    border-radius: 50%;
}

.add-icon:hover {
    background-color: #45a049;
}

/* 导航标签 */
.nav-tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
}

.nav-tab {
    flex: 1;
    padding: 12px 16px;
    text-align: center;
    cursor: pointer;
    color: #666;
    font-size: 14px;
    transition: all 0.2s;
    position: relative;
}

.nav-tab.active {
    color: #2e7d32;
    font-weight: 500;
}

.nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #4CAF50;
}

/* 联系人列表 */
.contacts-list {
    flex: 1;
    overflow-y: auto;
}

.contact-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid #f0f0f0;
}

.contact-item:hover {
    background-color: #f8f8f8;
}

.contact-item.active {
    background-color: #e8f5e8;
}

.contact-item.pinned {
    background-color: #fff3e0;
    border-left: 3px solid #ff9800;
}

.contact-item.pinned.active {
    background-color: #e8f5e8;
}

.contact-name.active {
    color: #3a843e;
    font-weight: 500;
}

.pin-icon {
    width: 12px;
    height: 12px;
    color: #ff9800;
    margin-left: 4px;
}

/* 头像和用户信息 */
.contact-avatar,
.user-avatar {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    flex-shrink: 0;
}

.contact-avatar.active {
    border-radius: 50%;
    border: 2px solid #2e7d32;
}

.contact-avatar img,
.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ddd;
}

.contact-info,
.user-info {
    flex: 1;
    min-width: 0;
}

.contact-name,
.user-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
}

.contact-last-message {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-status {
    font-size: 12px;
    margin-top: 2px;
}

.online-status {
    color: #4CAF50;
    font-weight: 500;
}

.offline-status {
    color: #999;
}

.online-dot {
    width: 8px;
    height: 8px;
    background-color: #4CAF50;
    border-radius: 50%;
    display: inline-block;
}

.contact-time {
    font-size: 11px;
    color: #999;
    flex-shrink: 0;
    margin-left: 8px;
}

/* 右侧聊天面板 */
.chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: white;
}

.chat-header {
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.user-status {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #4CAF50;
}

.status-dot {
    width: 6px;
    height: 6px;
    background-color: #4CAF50;
    border-radius: 50%;
    margin-right: 4px;
}

.chat-actions {
    display: flex;
    gap: 12px;
}

.action-icon {
    width: 20px;
    height: 20px;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.action-icon:hover {
    background-color: #f0f0f0;
}

/* 消息区域 */
.messages-area {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #fafafa;
}

.message {
    margin-bottom: 16px;
    display: flex;
}

.message-sent {
    justify-content: flex-end;
}

.message-received {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 18px;
    position: relative;
}

.message-sent .message-bubble {
    background-color: #4CAF50;
    color: white;
    border-bottom-right-radius: 4px;
}

.message-received .message-bubble {
    background-color: white;
    color: #333;
    border: 1px solid #e0e0e0;
    border-bottom-left-radius: 4px;
}

.message-text {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.message-time {
    font-size: 11px;
    opacity: 0.7;
    text-align: right;
}

.message-received .message-time {
    text-align: left;
}

.message-emoji {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 4px;
}

.message-image {
    margin-bottom: 4px;
}

.message-image img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
    object-fit: cover;
}

.message-image img:hover {
    transform: scale(1.02);
}

/* 输入区域 */
.input-area {
    position: relative;
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: white;
}

.input-actions {
    display: flex;
    gap: 8px;
}

.input-icon {
    width: 20px;
    height: 20px;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.input-icon:hover {
    background-color: #f0f0f0;
}

.message-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.message-input:focus {
    border-color: #4CAF50;
}

.send-icon {
    width: 20px;
    height: 20px;
    color: white;
    background-color: #4CAF50;
    border-radius: 50%;
    cursor: pointer;
    padding: 8px;
    transition: background-color 0.2s;
}

.send-icon:hover {
    background-color: #45a049;
}

/* 表情包选择器 */
.emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgba(46, 125, 50, 0.15);
    z-index: 10000;
    width: 500px;
    max-height: 200px;
    overflow: hidden;
    min-height: 100px;
    backdrop-filter: blur(10px);
    border-top: 3px solid #2e7d32;
}

.emoji-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e8f5e8;
    background: linear-gradient(135deg, #f8f9fa, #e8f5e8);
    border-radius: 12px 12px 0 0;
}

.emoji-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.close-emoji {
    width: 16px;
    height: 16px;
    color: #666;
    cursor: pointer;
    padding: 2px;
    border-radius: 2px;
    transition: background-color 0.2s;
}

.close-emoji:hover {
    background-color: #e0e0e0;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    padding: 12px;
    max-height: 120px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2e7d32 #f0f0f0;
}

.emoji-grid::-webkit-scrollbar {
    width: 6px;
}

.emoji-grid::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

.emoji-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2e7d32, #4caf50);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.emoji-grid::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1b5e20, #2e7d32);
}

.emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 22px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    user-select: none;
    pointer-events: auto;
    margin: 2px;
}

.emoji-item:hover {
    background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.2);
}

.emoji-item:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
}

/* 弹窗样式 */
.add-friend-content,
.search-contacts-content {
    padding: 10px 0;
}

.search-section {
    margin-bottom: 20px;
}

.search-input {
    width: 100%;
}

.search-results,
.search-contacts-results {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 15px;
}

.result-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    font-weight: 500;
}

.user-item,
.contact-search-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.user-item:last-child,
.contact-search-item:last-child {
    border-bottom: none;
}

.contact-search-item:hover {
    background-color: #f8f8f8;
}

.user-id {
    font-size: 12px;
    color: #999;
}

.no-results {
    text-align: center;
    color: #999;
    padding: 20px 0;
    font-size: 14px;
}

/* 图片预览 */
.image-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor: pointer;
}

.image-preview-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
}

/* 滚动条 */
.contacts-list::-webkit-scrollbar,
.messages-area::-webkit-scrollbar {
    width: 4px;
}

.contacts-list::-webkit-scrollbar-track,
.messages-area::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.contacts-list::-webkit-scrollbar-thumb,
.messages-area::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

.contacts-list::-webkit-scrollbar-thumb:hover,
.messages-area::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 下拉菜单 */
.el-dropdown-menu__item.pinned {
    color: #ff9800;
}

.el-dropdown-menu__item.pinned .el-icon {
    color: #ff9800;
}
</style>

<style>
/* 全局样式 - 自定义确认对话框 */
.custom-message-box {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(46, 125, 50, 0.15) !important;
}

.custom-message-box .el-message-box__header {
    background: linear-gradient(135deg, #2e7d32, #4caf50) !important;
    color: white !important;
    padding: 20px 24px !important;
    border-radius: 12px 12px 0 0 !important;
    margin: -20px -20px 20px -20px !important;
}

.custom-message-box .el-message-box__title {
    color: white !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.custom-message-box .el-message-box__content {
    padding: 0 24px 20px 24px !important;
    color: #333 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.custom-message-box .el-message-box__btns {
    padding: 0 24px 24px 24px !important;
    justify-content: center !important;
    gap: 12px !important;
}

.custom-message-box .el-button {
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.custom-message-box .el-button--primary {
    background: linear-gradient(135deg, #2e7d32, #4caf50) !important;
    border: none !important;
    color: white !important;
}

.custom-message-box .el-button--primary:hover {
    background: linear-gradient(135deg, #1b5e20, #2e7d32) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3) !important;
}

.custom-message-box .el-button--default {
    background: #f5f5f5 !important;
    border: 1px solid #e0e0e0 !important;
    color: #666 !important;
}

.custom-message-box .el-button--default:hover {
    background: #e8f5e8 !important;
    border-color: #4caf50 !important;
    color: #2e7d32 !important;
}

/* 自定义成功提示样式 */
.el-message--success {
    background: linear-gradient(135deg, #e8f5e8, #f1f8e9) !important;
    border: 1px solid #4caf50 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15) !important;
}

.el-message--success .el-message__content {
    color: #2e7d32 !important;
    font-weight: 500 !important;
}

.el-message--success .el-message__icon {
    color: #4caf50 !important;
}

.el-message--success .el-message__closeBtn {
    color: #2e7d32 !important;
}

.el-message--success .el-message__closeBtn:hover {
    color: #1b5e20 !important;
}
</style>
